<template>
    <div style="margin: 0 auto;width: 80%;bottom: 10px">

            <template v-for="(item,index) in blogCommentList" class="list-item">

                <table style="margin: 0 auto;text-align: left">
                    <tr>
                        <td style="width: 4%">{{index+1}}</td>
                        <td style="width: 10%">
                            <el-avatar :size="60" :src="item.avatarUrl" @error="true">
                                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                            </el-avatar>

                        </td>
                        <td style="width: 70%;">
                            <div>{{item.username}}</div>
                            <div>粉丝数  58991 获赞 13752 上周排名2</div>

                        </td>

                        <td style="width: 10%;">
                            <div>综合指标 846</div>
                            <div v-if="item.fans==0"><el-button @click="payAttention(item)" style="border-radius: 20px;width: 80px">关&nbsp;注</el-button></div>
                            <div v-else><el-button @click="payNotAttention(item)" style="border-radius: 20px;width: 80px">已关注</el-button></div>

                        </td>
                    </tr>

                </table>

            </template>
            <div style="margin: 0 auto;">
                <div v-if="moreShow" style="margin: 0 auto;float: contour;">
                    <el-button style="border-radius: 20px;width: 70%" type="primary" @click="lookMore">查看更多</el-button>
                </div>
                <div v-else style="margin: 0 auto;border: none;float: contour;">
                    <el-button style="border-radius: 20px;width: 70%"  >暂无数据</el-button>
                </div>
            </div>
    </div>
    <ToLogin ref="toLoginRef" @loginBack="loginBack"></ToLogin>

</template>

<script>
    import ToLogin from '../../views/ToLogin'
    import {getCookie, getReq, postReq} from "../../utils/api";
    export default {

        mounted(){
          this._page()
        },
        components:{
            ToLogin,
        },
        name: "Home",
        data(){
            return {
                count: 10,
                pageNum: 1,
                pages: 10,
                moreShow:false,
                loading: false,
                forObject:{
                    id:'',
                    title:'',
                    releaseTime:undefined,
                    authorName:undefined,
                    content:''
                },
                blogCommentList:[],
                writeComment:false,
                comment:'',
                id:''
            }
        },
        computed: {
        },
        methods:{
            handleClick(data){
                console.log(data);
            },
            onInputTrue(){
                this.writeComment=true
            },
            onInputFalse(){
                if (''===this.comment){
                    this.writeComment=false
                }
            },
            setComment(){
                let ctrl=document.getElementById("writeCommentButton");
                ctrl.focus();
            },
            payAttention(item){
                let auth= getCookie('Authorization')
                if (undefined===auth||''===auth){
                    this.$refs.toLoginRef._open()
                    return false
                }
                item.fans=1
                postReq('/api/blog_fans/attention?id='+item.id).then(res=>{

                })
            },

            payNotAttention(item){
                item.fans=0
                postReq('/api/blog_fans/not_attention?id='+item.id).then(res=>{

                })
            },

            load () {
                alert(123)
                this.loading = true

            },
            releaseComment(){
                postReq('/api/blog_comment/add',{comment:this.comment,blogId:this.forObject.id}).then(res=>{
                    this._page()
                    this.comment=''
                    this.writeComment=false
                }).catch(err=>{
                    console.log(err)
                });
            },
            _getBlogDetail(id){
                getReq('/api/blog/'+id).then(res=>{
                    let data= res.data.data;
                    this.forObject = data;

                    console.log(this.forObject)
                    this._page()
                }).catch(err=>{
                    console.log(err)
                });
            },

            _page(){
                this.blogCommentList=[];
                postReq('/api/sys_user/page_rank_vo?rows='+10+'&page='+this.pageNum,{}).then(res=>{
                    console.log('---res---',res)
                    console.log('---res.data---',res.data)
                    console.log('---res.data.data---',res.data.data)
                    let page = res.data.data;
                    this.pageNum = page.pageNum
                    this.pages = page.pages
                    this.blogCommentList=res.data.data.records;
                    if (this.pageNum>=this.pages){
                        this.moreShow = false
                    }else{
                        this.moreShow = true
                    }
                    console.log('---this.blogCommentList---',this.blogCommentList)
                })
            },


            //时间格式转换
            dateFormat: function (time) {
                if (undefined ===time||''===time){
                    return time
                }
                let date = new Date(time);
                let year = date.getFullYear();
                /* 在日期格式中，月份是从0开始的，因此要加0
                 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                 * */
                let month =
                    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                // 拼接
                return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
            },

            lookMore(){
                this.pageNum=this.pageNum+1;
                postReq('/api/sys_user/page_rank_vo?rows='+10+'&page='+this.pageNum,{}).then(res=>{
                    let page = res.data.data;
                    this.pageNum = page.pageNum
                    this.pages = page.pages
                    let nowPage =res.data.data.records;

                    let listData = this.blogCommentList
                    nowPage.forEach(function (obj) {
                        listData.push(obj)
                    });
                    this.blogCommentList = listData
                    if (this.pageNum>=this.pages){
                        this.moreShow = false
                    }else{
                        this.moreShow = true
                    }
                    console.log('---this.blogCommentList---',this.blogCommentList)

                })
            },





        },
    }
</script>

<style scoped>
    .el-divider--vertical{
        display:inline-block;
        width:1px;
        height:100%;
        margin:0 8px;
        vertical-align:middle;
        position:relative;
    }


</style>
